<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted () {
    // this.renderChart()
  },
  data () {
    return {
      deviceName: {
        1: '土壤监测仪',
        2: '气象检测仪',
        3: '长势监测仪',
        4: '视频监控'
      },
      echartsData: null
    }
  },
  props: {
    deviceType: {
      type: String,
      default: ''
    }
    // echartsData: {
    //   type: Object,
    //   require: true
    // }
  },
  watch: {
    // echartsData: {
    //   handler (newValue, oldValue) {
    //     // 当 echartsData 变化时调用 renderChart 方法
    //     if (Object.keys(newValue).length !== 0) {
    //       this.renderChart()
    //     }
    //   },
    //   // 是否立即执行一次 handler
    //   immediate: true,
    //   // 是否深度监听对象内部值的变化
    //   deep: true
    // }
  },
  // mounted () {
  // },
  methods: {
    getDataList (data) {
      this.echartsData = data
      this.renderChart()
    },
    renderChart () {
      const vm = this
      // const colors = ['#3b7dfd', '#30ce99', '#a9bcdf', '#7f64ff']
      const option = {
        // color: colors,
        // title: {
        //   text: '水质检测'
        // },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#ffffff',
          borderWidth: 0,
          padding: 10,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        //   formatter (res) {
        //     let result = ''
        //     res.map(item => {
        //       result = result + `
        //         <div class="chartLine">
        //           <span class="chartCircular" style="border-color:${item.color}"></span>
        //           <span class="chartTag">${item.seriesName}</span>
        //           <span>0.0</span>
        //         </div>
        //       `
        //     })
        //     return `
        //         <div class="chartBack">
        //           <div class="chartTitle">${res.length ? res[0].name : ''} ${vm.deviceName[vm.deviceType]}</div>
        //           <div class="chartContent">
        //             ${result}
        //           </div>
        //         </div>
        //     `
        //   }
        },
        legend: {
          y: 'bottom',
          show: true,
          bottom: '2%',
          itemWidth: 10,
          itemHeight: 3,
          icon: 'rect',
          textStyle: {
            color: '#556677'
          }
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        grid: {
          left: '4%',
          right: '6%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.echartsData.categories,
            min: 'auto',
            max: 'auto',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#707070'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#e6e6e6',
                type: 'dashed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#707070'
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#e6e6e6',
                type: 'dashed'
              }
            }
          }
        ],
        series: this.echartsData.series.map(item => ({
          name: item.name,
          type: 'line',
          // stack: 'Total',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 10,
          // areaStyle: {
          //   opacity: 0.1,
          //   color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0,
          //       color: '#3b7dfd'
          //     },
          //     {
          //       offset: 1,
          //       color: '#fff'
          //     }
          //   ])
          // },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        }))
      }
      const chart = echarts.init(this.$refs.chart)
      chart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 可自定义样式 */
.chart {
  width: 100%;
  height: 200px
}
</style>
